<script setup>
//导入pinia数据

import { ref } from "vue";
import {teacherStateStore} from '../store/TeacherInfo.js'

//导入路由
import  {useRouter} from 'vue-router';
const router=useRouter();
var teacherInfo = teacherStateStore()

//使用pinia数据源  尽可能使用函数去获取属性
function layout(){
    //设置pinia
    teacherInfo.setterTeacherId("");
    teacherInfo.setterTeacherName("");
    teacherInfo.setterTeacherAccount("");
    teacherInfo.setterTeacherPassword("");
    teacherInfo.setterTeacherLoginState("0");
    

    //路由跳转登录页
    router.push("/login")
}



</script>

<template>
    <div class="bar"  v-if="teacherInfo.getterTeacherteacherLoginState == '1'">   
        <div  id="login_log" class="bar_t">
            <img src="../public/img/logo.jpg">
        </div>
        <div id="center_title" class="bar_t"><h2>教学无忧教师端</h2></div>
        <div  class="bar_t right" ></div>  
        <div  class="bar_t right"   v-if="teacherInfo.getterTeacherteacherLoginState == '1'">
            欢迎<span >{{ teacherInfo.getterTeacherName }}</span>
            <button style="display: inline-block; background-color: chocolate;" @click="layout">退出</button>
        </div>
        
    </div>
</template>

<style scoped>
.bar{
    height: 40px;
    width: 100% ;
    background-color: rgb(228, 221, 211);
}

/*
    标题框控制
*/
.bar_t{
    display: inline-block;    
}
#login_log{
 position: relative;   
 float: left;
    
}
.right{
    float: right;
}
#center_title{
    position: absolute;
    left: 40%;
}
</style>
